<template>
    <div>
        <div>
            <el-dialog
                title="下发指令"
                v-if="dialogVisible"
                v-dialogDrag
                :visible.sync="dialogVisible"
                width="600px"
                :before-close="handleClose"
                :class="dialogVisible == true ? 'action01' : 'action02'"
            >
                <div class="btn-warp">
                    <div v-for="(item, index) in cmdData" :key="index">
                        <el-button
                            type="primary"
                            size="size"
                            @click="handleCommand(item)"
                            >{{ item.def_name }}</el-button
                        >
                    </div>
                </div>

                <!-- <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false"
                        >确 定</el-button
                    >
                </span> -->
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { getCmdList, getCeviceControl } from "@/api/scene/index";
export default {
    name: "cmdDialog",
    data() {
        return {
            dialogVisible: false,
            paramData: {},
            cmdData: [],
        };
    },
    created() {},
    mounted() {},
    watch: {
        dialogVisible(val) {
            if (val) {
                this.getData();
            }
        },
    },
    methods: {
        handleShowDialog(e) {
            console.log(e);
            this.paramData = e;
            this.dialogVisible = true;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        handleCommand(e) {
            console.log(e);
            const formData = {
                devId: this.paramData.devId,
                endpoint: this.paramData.ep,
                svcId: this.paramData.svcId,
                cmdId: e.def_id,
                cmdValue: [],
            };
            this.$confirm("此操作将下发指令, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const {
                        data: { code, data, msg },
                    } = await getCeviceControl(formData);
                    if (code === "200") {
                        this.$message({
                            type: "success",
                            message: "指令下发成功",
                        });
                        this.dialogVisible = false;
                        this.$emit("getData");
                    } else {
                        this.$message({
                            type: "error",
                            message: msg,
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        async getData() {
            const {
                data: { code, data, msg },
            } = await getCmdList({
                svcId: this.paramData.svcId,
            });
            if (code == 200) {
                // console.log(data);
                this.cmdData = data;
            } else {
                this.$message({
                    type: "error",
                    message: msg,
                });
            }
        },
    },
};
</script>
<style>
.action01 {
    animation: zoomIn 0.5s;
    animation-iteration-count: 1;
}

.action02 {
    animation: zoomOut 0.5s;
    animation-iteration-count: 1;
}
</style>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.btn-warp {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
</style>
